<template>
    <div>
        <!-- <div class="nav_list">
            <div class="nav_item" 
                v-for="(item, index) in tabList" 
                @click="changeNav(item, index)"
                :key="index" :class="{active: item.value == actTab}">
                <span>{{item.label}}</span>
            </div>
        </div> -->
        <div class="title flex">
            <span>{{ actTab == '00' ? '购买会员' : '分享点数充值' }}</span>
            <div class="flex-1"></div>
            <p class="color-999 flex-v-center pad-r20">
                （向左滑动，查看更多）
                <i class="icon-back fs26"></i>
            </p>
        </div>
        <div class="box">
            <div class="taocan">
                <div class="item" 
                    @click="actId = item.id"
                    :class="{active: actId == item.id}" 
                    v-for="(item, index) in list" :key="index">
                    <p>{{item.title}}</p>
                    <div class="price">
                        <em>￥</em>
                        <div>{{item.money}}</div>
                    </div>
                    <span>{{item.decript}}</span>
                    <div class="hot">{{item.remark}}</div>
                </div>
            </div>
        </div>
        <template v-if="actTab == '00'">            
            <div class="title">
                <span>会员权益</span>
            </div>
            <div class="power">
                <div class="item" v-for="(i, idx) in power" :key="idx">
                    <div class="flex-v-center pw_icon">
                        <image :src="`/static/images/vip/${i.icon}.webp`" mode="" />
                        <span class="mar-l30">{{i.title}}</span>
                    </div>
                    <p class="color-666 mar-t10">{{i.des}}</p>
                </div>
            </div>
        </template>
        <div class="bottom">充值成功后不支持退款</div>
        <div class="btn" v-if="actId && showPayBtn" @click="submitPay">
            <div class="buy_btn">微信支付{{actItem.money}}元</div>
        </div>
    </div>
</template>

<script>
import { getVIPConfig } from '@/request/user'
import { createOrder, createOrderPay } from '@/request/order'
export default {
    data() {
        return {
            actTab: '00',
            tabList: [
                { label: '会员充值', value: '00'},
                { label: '分享点数充值', value: '02'},
            ],
            power: [
                { icon: 'hk2x', title: '获客', des: '实时查看精准访客，精准分析' },
                { icon: 'nl2x', title: '能力', des: '快速制作优质推广素材' },
                { icon: 'gg2x', title: '广告', des: '文章视频带货，广告任意植入' },
                { icon: 'sy2x', title: '收益', des: '邀请注册开通奖金多多' },
                { icon: 'fw2x', title: '服务', des: '专属VIP导师1对1指导服务' },
                { icon: 'fl2x', title: '福利', des: '赠送高级导师营销视频课程' },
                { icon: 'more2x', title: '更多', des: '更多权益，敬请期待' },
            ],
            actId: '',
            showPayBtn: false,
            list: []
        }
    },
    computed: {
        actItem() {
            return this.list.find(i => i.id == this.actId)
        }
    },
    onLoad({ actTab }) {
        if(actTab) {
            this.actTab = actTab;
        } 
        this.getList()
        if(this.mixinIsDevRunTime) {
            this.showPayBtn = true
        }
        this.$wxConfig().then(() => {
            this.showPayBtn = true
        })
    },
    methods: {
        changeNav(item) {
            this.actTab = item.value
            this.getList()
        },
        getList() {
            getVIPConfig({
                type: this.actTab//'02', //00 会员，02 小红书
            }).then(res => {
                this.list = res.data
                this.actId = this.list[0].id
            })
        },
        async submitPay() {
            let shareUserId = uni.getStorageSync('shareUserId') || void 0;
            let orderRes = await createOrder({
                orderItemData: JSON.stringify([ {vipId: this.actId, buyNumber: 1} ]),
                orderType: this.actTab, //'00' , //00充值vip,01商品ID 02分享点数
                shareUserId,
            })
            createOrderPay({
                orderNo: orderRes.data.orderNo,
                payType: 'WXJSA',
            }).then(res => {
                let payInfo;
                try {
                    payInfo = JSON.parse(res.data.payData)
                } catch(err) {
                    return this.$interact.modal('支付信息错误')
                }
                console.log(payInfo);
                jWeixin.chooseWXPay({
                    timestamp: payInfo.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
                    nonceStr: payInfo.nonceStr, // 支付签名随机串，不长于 32 位
                    package: payInfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: payInfo.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
                    paySign: payInfo.paySign, // 支付签名
                    success: wxRes => {
                        this.$refreshUserInfo().then(() => {
                            this.$interact.modal('支付成功').then(() => {
                                this.$navigate.back()
                            })
                        })
                        // 支付成功
                    },
                });

            })

        }
    }

}
</script>

<style lang="less" scoped>
.page{
    padding-bottom: 100rpx;
}
.nav_list{
    display: flex;
    align-items: center;
    height: 90rpx;
    margin-bottom: 10rpx;
    .nav_item{
        height: 100%;
        flex-shrink: 0;
        padding: 0 20rpx;
        font-size: 34rpx;
        font-weight: bold;
        .align(center);
        &.active{
            color: @mainColor;
            position: relative;
            &::after{
                content: "";
                width: 35%;
                height: 8rpx;
                background: @mainColor;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                
            }
        }
    }
}
.title{
    width: 100%;
    height: 100rpx;
    position: relative;
    padding: 30rpx;
    background: #fff;
    display: flex;
    align-content: center;
    &::before{
        content: "";
        width: 10rpx;
        height: 40rpx;
        background: #333;
        position: absolute;
        top: 30rpx;
        left: 0;
    }
    span{
        font-size: 36rpx;
        font-weight: bold;
        line-height: 40rpx;
    }
    .icon-back {
        transform: rotate(180deg);
        color: #ff6600;
        animation: toRight 1.2s linear infinite;
    }
}
.box{
    background: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    overflow: auto;
    .taocan{
        width: 100%;
        display: flex;
        .item{
            flex-shrink: 0;
            box-shadow: 0 0 20rpx #eee;
            width: 260rpx;
            height: 300rpx;
            margin-right: 20rpx;
            border-radius: 30rpx;
            // border: 1px solid #ccc;
            padding: 40rpx 30rpx 30rpx;
            position: relative;
            &.active{
                border: 1px solid #c18139;
                background: #fff8e8;
            }
            .hot{
                .gradient(#e5b178, #c3833c, to right);
                position: absolute;
                top: -20rpx;
                left: -1px;
                color: #fff;
                font-size: 32rpx;
                height: 50rpx;
                line-height: 50rpx;
                padding: 0 20rpx;
                border-radius: 20rpx 0 20rpx 0;
            }
            p{
                font-size: 36rpx;
                font-weight: bold;
                text-align: center;
            }
            .price{
                display: flex;
                align-items: flex-end;
                justify-content: center;
                margin-top: 50rpx;
                em{
                    font-size: 24rpx;
                    font-weight: bold;
                    line-height: 30rpx;
                }
                div{
                    font-size: 60rpx;
                    font-weight: bold;
                    line-height: 60rpx;
                    padding-right: 10rpx;
                }
            }
            span{
                text-align: center;
                display: block;
                margin-top: 15rpx;
                color: #999;
            }
        }
    }
}

.power{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 20rpx;
    background: #fff;
    .item{
        width: 50%;
        padding: 30rpx 20rpx;
        border-bottom: 1px solid #eee;
        &:nth-child(odd) {
            border-right: 1px solid #eee;
        }
        .pw_icon{
            image{
                width: 70rpx;
                height: 70rpx;
            }
            span{
                font-size: 34rpx;
                font-weight: bold;
            }
        }

    }

}

.bottom{
    padding: 60rpx 0 250rpx;
    background: #fff;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    &::after,
    &::before{
        content: "";
        width: 50rpx;
        margin: 0 20rpx;
        height: 1px;
        background: #ddd;
    }
}

.btn{
    // background: #fff;
    padding: 40rpx 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    .buy_btn{
        width: 650rpx;
        height: 110rpx;
        line-height: 110rpx;
        background: linear-gradient(1turn,#a10c0b,#fe332f 100%,#e02e42 0);
        border-radius: 60rpx;
        color: #fff;
        font-size: 40rpx;
        text-align: center;
        font-weight: bold;
        margin: 0 auto;
        animation: musicicon 1.5s linear infinite;
    }
}

@keyframes musicicon{
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes toRight{
    0% {
        transform: rotate(180deg) translateX(10rpx);
    }
    100% {
        transform: rotate(180deg) translateX(-40rpx);
    }
}
</style>